<!-- 维修信息 -->

<template>
	<Card>
		<template #head>
			维修信息
		</template>
		<template #body>
			<view class="table">
				<view class="table-head u-p-l-20">
					<view class="table-head-label u-flex-2">
						维修项名称
					</view>
					<view class="table-head-label u-flex-1">
						数量
					</view>
					<view class="table-head-label u-flex-1">
						附件
					</view>
				</view>
				<view class="table-body u-p-l-20">
					<view class="table-body-column u-flex u-border-bottom" v-for="(item,index) in repairInfo" :key="index">
						<view class="table-body-column--value u-flex-2">
							{{item.name}}
						</view>
						<view class="table-body-column--value u-flex-1">
							{{item.num}}
						</view>
						<view class="table-body-column--value u-flex-1">
							<view class="file-text">
								<u-icon name="attach" class="u-m-r-20"></u-icon>
								{{item.enclosure | enclosureNum}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>
	</Card>
</template>

<script>
	import Card from '@/components/card/components/cardDetail.vue'
	import CellItemDetail from '@/components/cell/itemDetail.vue'
	export default {
		filters: {
			enclosureNum(val) {
				if (val) {
					return JSON.parse(val).length
				}
				return 0
			}
		},
		props: {
			repairInfo: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		components: {
			Card,
			CellItemDetail
		},
	}
</script>

<style lang="scss" scoped>
	.table {
		display: flex;
		flex-direction: column;

		&-head {
			display: flex;
			align-items: center;
			height: 72rpx;
			background-color: #DEE2EE;
			border-radius: 16rpx 16rpx 0 0;


			&-label {
				font-weight: 600;
				font-size: 28rpx;
				color: #0F2E4D;
			}
		}

		&-body {
			display: flex;
			flex-direction: column;

			&-column {
				height: 100rpx;

				&--value {
					font-weight: 400;
					font-size: 28rpx;
					color: #0F2E4D;
				}
			}
		}
	}

	.file-text {
		color: #409EFF;
	}
</style>
